import { createSlice, PayloadAction, createAsyncThunk } from '@reduxjs/toolkit';
import type { RootState } from '../store';
import { areEqual } from '@utils/utils';

// Define a type for the slice state
interface initialState {
    option: LeftSide;
    meun: RouterItem[];
    keyPath: string[];
    selectedKeys: string[];
    defaultSelectedKeys: string[];
    openKeys: string[];
    defaultOpenKeys: string[];
}

// Define the initial state using that type
const initialState = {
    option: { hidden: false },
    meun: [],
    selectedKeys: [],
    defaultSelectedKeys: [],
    openKeys: [],
    defaultOpenKeys: [],
    keyPath: [],
} as initialState;

export const reducerSlice = createSlice({
    name: 'leftSider', // nameSpace
    initialState,
    reducers: {
        setOption: (state, action: PayloadAction<LeftSide>) => {
            let isEqual = areEqual(state.option, action.payload);
            if (!isEqual) {
                state.option = action.payload;
            }
        },
        setMenu: (state, action: PayloadAction<RouterItem[]>) => {
            let isEqual = areEqual(state.meun, action.payload);
            if (!isEqual) {
                state.meun = action.payload;
            }
        },
        setKeyPath: (state, action: PayloadAction<string[]>) => {
            let isEqual = areEqual(state.keyPath, action.payload);
            if (!isEqual) {
                state.keyPath = action.payload;
            }
        },
        setSelectedKeys: (state, action: PayloadAction<string[]>) => {
            let isEqual = areEqual(state.selectedKeys, action.payload);
            if (!isEqual) {
                state.selectedKeys = action.payload;
            }
        },
        setOpenKeys: (state, action: PayloadAction<string[]>) => {
            let isEqual = areEqual(state.openKeys, action.payload);
            if (!isEqual) {
                state.openKeys = action.payload;
            }
        },
        setDefaultSelectedKeys: (state, action: PayloadAction<string[]>) => {
            let isEqual = areEqual(state.defaultSelectedKeys, action.payload);
            if (!isEqual) {
                state.defaultSelectedKeys = action.payload;
            }
        },
        setDefaultOpenKeys: (state, action: PayloadAction<string[]>) => {
            let isEqual = areEqual(state.defaultOpenKeys, action.payload);
            if (!isEqual) {
                state.defaultOpenKeys = action.payload;
            }
        },
        hidden: (state, action: PayloadAction<boolean>) => {
            if (state.option.hidden != action.payload) {
                state.option.hidden = action.payload;
            }
        },
    },
    extraReducers: {},
});

export const {
    setOption,
    setMenu,
    setKeyPath,
    setSelectedKeys,
    setOpenKeys,
    setDefaultSelectedKeys,
    setDefaultOpenKeys,
    hidden,
} = reducerSlice.actions;

// Other code such as selectors can use the imported `RootState` type
export const getOption = (state: RootState) => state.leftSider.option;
export const getMenu = (state: RootState) => state.leftSider.meun;
export const getKeyPath = (state: RootState) => state.leftSider.keyPath;
export const getSelectedKeys = (state: RootState) => state.leftSider.selectedKeys;
export const getOpenKeys = (state: RootState) => state.leftSider.openKeys;
export const getDefaultSelectedKeys = (state: RootState) => state.leftSider.defaultSelectedKeys;
export const getDefaultOpenKeys = (state: RootState) => state.leftSider.defaultOpenKeys;

export default reducerSlice.reducer;
